import { useCallback, useEffect, useRef, useState } from "react";
import * as echarts from 'echarts';
import { AccountType } from "../../interface";
import MyChart from ".";



interface LineChartData {
    x: string[]
    y: {
        [k: string]: number[]
    }
}
interface ILineCharProp extends LineChartData {
    title: string
}
const LineChart: React.FC<ILineCharProp> = (props) => {

    const [option, setOption] = useState<echarts.EChartsOption>({
        tooltip: {
            trigger: 'axis'
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        yAxis: {
          type: 'value'
        },
    });

    useEffect(() => {
        
        const series: echarts.SeriesOption | echarts.SeriesOption[] = [];
        for (let key in props.y) {
            series.push({
                name: key,
                type: 'line',
                data: props.y[key]
            });
        }

        const customOption: echarts.EChartsOption = {
            ...option,
            title: {
                text: props.title
            },
            legend: {
                data: [AccountType.expend, AccountType.income]
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: props.x
            },
            series: series
        }
        
        setOption(customOption)
    }, [props.x, props.y, props.title])


    return (
        <MyChart option={option} title={props.title} />
    )
}

export default LineChart;
